<template>
  <el-table :data="data" border class="wfull">
    <el-table-column prop="name" label="名称" />
    <el-table-column prop="label" label="标签" />
    <el-table-column label="类型">
      <template #default="{ row }">{{ relationTypes[row.type] }}</template>
    </el-table-column>
    <el-table-column prop="seedName" label="模块" />
    <el-table-column prop="selfColumn" label="当前列" />
    <el-table-column prop="targetColumn" label="目标列" />
    <el-table-column label="操作" :width="100">
      <template #header>
        <OperateBar :operates="['add', 'batch-add','batch-edit']" @add="add" @batch-add="batchAdd" @batch-edit="batchEdit" />
        <!-- <div class="flex-center">
          <el-dropdown>
            <ElButton type="success" size="small" link>新增</ElButton>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="addRelation('hasOne')">
                  <Icon icon="icon-park:one-to-one" />一对一
                </el-dropdown-item>
                <el-dropdown-item @click="addRelation('belongsTo')">
                  <Icon icon="mdi:relation-many-to-one" />多对一
                </el-dropdown-item>
                <el-dropdown-item @click="addRelation('hasMany')">
                  <Icon icon="icon-park:one-to-many" />一对多
                </el-dropdown-item>
                <el-dropdown-item @click="addRelation('habtm')">
                  <Icon icon="icon-park:many-to-many" />多对多
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div> -->
      </template>
      <template #default="{ row }">
        <OperateBar :operates="['edit','remove']" @edit="edit(row.type, row.name)" @remove="remove(row.type, row.name)" />
        <!-- <div class="flex-center">
          <el-dropdown>
            <ElButton type="primary" size="small" link>操作</ElButton>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="editRelation(row.type, row.name)">
                  <Icon icon="ep:edit" />编辑
                </el-dropdown-item>
                <el-dropdown-item @click="removeRelation(row.type, row.name)">
                  <Icon icon="ep:remove" color="red" />删除
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div> -->
      </template>
    </el-table-column>
  </el-table>
</template>
<script lang="ts" setup>
  import { getSeed } from '@/views/seed-dev'
  import { ElTable, ElTableColumn } from 'element-plus'
  import { computed } from 'vue';
  import { RelationType } from '@/views/types';
  import { RelationBatchCreator, RelationCreator, RelationEditor, relationTypes } from '..';
  import { open } from '@/components/Popup';
  import { OperateBar } from '../../OperateBar';
import RelationBatchEditor from './RelationBatchEditor.vue';

  const props = defineProps<{seedName: string}>()

  const data = computed((): any[] => {
    const ret = []
    const seed = getSeed(props.seedName)
    for(const cross in seed.hasOne) {
      const r = seed.hasOne[cross]
      ret.push({...r, type: 'hasOne', name: cross})
    }

    for(const cross in seed.belongsTo) {
      const r = seed.belongsTo[cross]
      ret.push({...r, type: 'belongsTo', name: cross})
    }

    for(const cross in seed.hasMany) {
      const r = seed.hasMany[cross]
      ret.push({...r, type: 'hasMany', name: cross})
    }

    for(const cross in seed.habtm) {
      const r = seed.habtm[cross]
      ret.push({...r, type: 'habtm', name: cross})
    }

    return ret
  })

  function add(type: RelationType) {
    open({title: '创建关系'}, RelationCreator, { seedName: props.seedName, type })
  }

  function batchAdd() {
    open({title: '批量创建关系', fullscreen: true}, RelationBatchCreator, { seedName: props.seedName })
  }

  function batchEdit() {
    open({title: '批量编辑关系', fullscreen: true}, RelationBatchEditor, { seedName: props.seedName })
  }

  function edit(type: RelationType, cross: string) {
    open({title: '编辑关系'}, RelationEditor, { seedName: props.seedName, type, cross })
  }

  function remove(type: RelationType, cross: string) {
    const seed = getSeed(props.seedName)
    switch(type) {
      case 'hasOne':
        delete seed.hasOne[cross]
        break
      case 'belongsTo':
        delete seed.belongsTo[cross]
        break
      case 'hasMany':
        delete seed.hasMany[cross]
        break
      case 'habtm':
        delete seed.habtm[cross]
        break
    }
  }
</script>